<div class="modal-holder">
  <div class="modal"
       [@modalState]="isVisible?'visible':'hidden'"
       (@modalState.done)="handleDone($event)">
    <header>
      <div class="title">{{getTitle()}}</div>
      <div *ngIf="modalOptions.dismissible"
           class="closer clickable" (click)="hide()">
        <i class="fa fa-times "></i>
      </div>
    </header>
    <section class="content scrollable">
      <div #modalContainer></div>
    </section>
    <footer *ngIf="hasFooter()">
      <div class="btn-group pull-right">
        <button *ngIf="modalOptions.secondaryAction"
                class="btn btn-default btn-default"
                [disabled]="isDisabled('secondaryAction')"
                (click)="executeSecondary()">
          {{modalOptions.secondaryAction.text}}
        </button>
        <button *ngIf="modalOptions.primaryAction"
                class="btn btn-default btn-primary"
                [disabled]="isDisabled('primaryAction')"
                (click)="executePrimary()">
          {{modalOptions.primaryAction.text}}
        </button>
      </div>
    </footer>
  </div>
</div>
